<template>
    <nav class="breadcrumb">
      <ul>
        <li v-for="(crumb, index) in crumbs" :key="index">
          <router-link :to="crumb.path">{{ crumb.name }}</router-link>
          <span v-if="index < crumbs.length - 1"> / </span>
        </li>
      </ul>
    </nav>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'
  
  // 获取当前路由对象
  const route = useRoute()
  
  // 计算面包屑数据
  const crumbs = computed(() => {
    let paths = []
    let currentPath = ''
    
    // 解析当前路由的路径
    route.matched.forEach(routeRecord => {
      currentPath += routeRecord.path
      paths.push({
        name: routeRecord.meta?.breadcrumb || routeRecord.name,
        path: currentPath
      })
    })
  
    return paths
  })
  </script>
  
  <style scoped>
  .breadcrumb {
    font-size: 14px;
  }
  
  .breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
  }
  
  .breadcrumb li {
    margin-right: 8px;
  }
  
  .breadcrumb a {
    text-decoration: none;
    color: #007bff;
  }
  
  .breadcrumb a:hover {
    text-decoration: underline;
  }
  </style>
  